<template>
  <!-- 统计卡片 -->
  <el-row :gutter="16" class="mb-16px">
    <el-col :span="6">
      <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
        <div class="flex items-center">
          <div
            class="w-68px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#fff] to-[#fff]">

            <el-image :src="data.devices.icon" show-progress>
              <div class="image-slot viewer-error">
                <el-icon><icon-picture /></el-icon>
              </div>
            </el-image>

          </div>
          <div>
            <div class="text-24px font-600 text-[#303133] leading-none">{{ data.name }}</div>
            <div class="text-14px text-[#909399] mt-10px">{{ data.deviceTypeName }} | {{ data.hostName }}</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
        <div class="flex items-center">
          <div
            class="w-88px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#fff] to-[#fff]">


            <el-image src="/src/assets/devices/fwq-5.png" show-progress>
              <div class="image-slot viewer-error">
                <el-icon><icon-picture /></el-icon>
              </div>
            </el-image>

          </div>
          <div>
            <div v-if="devicesStatus == 1" class="text-24px font-600 text-[#009688] leading-none">正常</div>
            <div v-if="devicesStatus == 0" class="text-24px font-600 text-[#E6A23C] leading-none">离线</div>
            <div class="text-14px text-[#909399] mt-10px">设备状态</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
        <div class="flex items-center">
          <div
            class="w-58px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#fff] to-[#fff]">
            <el-image src="/src//assets//devices/warning.png" show-progress>
              <div class="image-slot viewer-error">
                <el-icon><icon-picture /></el-icon>
              </div>
            </el-image>
          </div>
          <div>
            <div class="text-24px font-600 text-[#303133] leading-none">{{ data.alertDay }}</div>
            <div class="text-14px text-[#909399] mt-10px">24内报警数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
        <div class="flex items-center">
          <div
            class="w-58px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#fff] to-[#fff]">
            <el-image src="/src//assets//devices/warningTotal.png" show-progress>
              <div class="image-slot viewer-error">
                <el-icon><icon-picture /></el-icon>
              </div>
            </el-image>
          </div>
          <div>
            <div class="text-20px font-600 text-[#303133] leading-none">{{ data.alertTotal }}</div>
            <div class="text-14px font-600 text-[#909399] mt-10px">报警总数</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

import { onMounted, onUnmounted } from 'vue'
import { DevicesApi } from '@/api/business/devices'
import { Picture as IconPicture } from '@element-plus/icons-vue'

// 声明接收的 props
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})



//设备ID
const devicesId = ref()
//设备状态
const devicesStatus = ref() //1在线 0离线


// 定义刷新方法
const refresh = async () => {
  console.log('执行刷新操作', new Date().toLocaleTimeString())
  //五秒刷新一下设备状态
  const data = await DevicesApi.getDevices(devicesId.value)
  console.log("当前设备状态", data.status);

  devicesStatus.value = data.status


}

// 定时器变量
let timer = null

// 组件挂载后启动定时器
onMounted(() => {

  console.log("devicesId", props.data);
  devicesId.value = props.data.id
  devicesStatus.value = props.data.devices.status
  timer = setInterval(refresh, 5000) // 每5秒执行一次
})

// 组件卸载前清除定时器，防止内存泄漏
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})



</script>